<template>
  <div class="shop-hotSearch">
    <div class="hotSearch">
      <div class="top" v-if="isAdd">
        <div class="ipt">
          <div>
            <span>热搜标题:</span>
            <el-input v-model="input1" placeholder="请输入 热搜标题"></el-input>
          </div>
          <div>
            <span>热搜内容:</span>
            <el-input v-model="input2" placeholder="请输入 热搜内容"></el-input>
          </div>
          <div>
            <span>启用状态:</span>
            <el-select v-model="value" placeholder="请选择 启用状态">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>

        <div class="btn">
          <el-button type="primary" class="el-icon-search" @click="search">搜 索</el-button>
          <el-button class="el-icon-delete" @click="clear">清 空</el-button>
        </div>

      </div>
      <div class="btns">
        <div>
          <el-button type="primary" class="el-icon-plus" size="small" @click="add"> 新增</el-button>
          <el-button :disabled="NumberNum.length == 0" @click="delall" type="danger" size="small">批量删除</el-button>
        </div>
        <div>
          <el-button icon="el-icon-refresh" circle @click="refresh"></el-button>
          <el-button icon="el-icon-search" circle @click="show"></el-button>
        </div>
      </div>
      <div>
        <el-button type="primary" plain @click="toggleSelection">
          当前表格已选择 <span>{{ length }}</span> 项
          清空
        </el-button>
      </div>
      <div class="table">
        <!-- 表格 -->
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange" border stripe>
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="热搜标题" prop="title">
            <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
          </el-table-column>
          <el-table-column prop="content" label="热搜内容">
          </el-table-column>
          <el-table-column prop="recDate" label="录入时间" show-overflow-tooltip sortable>
          </el-table-column>
          <el-table-column prop="seq" label="顺序" show-overflow-tooltip sortable>
          </el-table-column>
          <el-table-column label="启用状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag :type="scope.row.status == 1 ? 'primary' : 'danger'" disable-transitions>{{ scope.row.status == 1
                ? '启用' : '未启用' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)"
                class="el-icon-edit">修改</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                class="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[10, 20, 30, 40]" :page-size="10"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

      </div>

      <!-- 弹窗 -->
      <el-dialog :title="bbb" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules">
          <el-form-item label="标题" prop="title" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="form.content"></el-input>
          </el-form-item>
          <el-form-item label="排序号" :label-width="formLabelWidth">
            <el-input-number v-model="form.seq" controls-position="right" @change="handleChange" :min="0"
              :max="10"></el-input-number>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-radio v-model="form.status" :label="0">下线</el-radio>
            <el-radio v-model="form.status" :label="1">正常</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="sure" v-if="isedit">确 定</el-button>
          <el-button type="primary" @click="editsure" v-else>确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Token from '../../../api/headers'
export default {
  data() {
    return {
      // radio: 0,
      // num: 0,
      isAdd: true,
      length: 0,
      isedit:true,
      bbb:'',
      input1: '',
      input2: '',
      options: [{
        value: '1',
        label: '启用'
      }, {
        value: '2',
        label: '未启用'
      }],
      tableData: [],
      multipleSelection: [],
      value: '',
      NumberId: [],
      NumberNum: [],
      data: '',
      error: '',
      isShow: true,
      gridData: [],
      dialogFormVisible: false,
      form: {
        title: '',
        content: '',
        status: 0,
        seq: 0,
      },
      formLabelWidth: '120px',
      currentPage4: 1,
      total: 0, // 总条数
      current: 1, // 当前页
      size: 10, // 每页显示的条数
      rules: {
        title: [
          { required: true, message: '标题不能为空', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '内容不能为空', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.fun()
  },
  methods: {
    // 多选
    toggleSelection(rows) {
      // console.log(rows)

      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (val) {
        this.NumberId = []
        for (let value of val) {
          this.NumberId.push(value.hotSearchId)
        }
      }
      console.log(val)
      
      console.log(this.NumberId.length,'val这个数组里面的数据的个数');
      this.length = this.NumberId.length
      
      this.NumberNum = val.length
      console.log(this.NumberId, '000fff0')
    },
    // 多选
    // 清空多选
    toggleSelection(){
      this.length = 0
      this.$refs.multipleTable.clearSelection()
    },
    handleChange(value) {
      console.log(value);
    },
    // 页面表格接口
    fun() {
      axios
        .get('http://47.104.167.34:9305/apis/admin/hotSearch/page', {
          params: {
            current: this.current,
            size: this.size,
            t: Date.now()
          },
          ...Token
        })
        .then((response) => {
          console.log(response, 'response的数据');
          this.tableData = response.data.data.records
          console.log(this.tableData, 'tableData的数据');
          this.total = Number(response.data.data.total)

          this.error = null
        })
        .catch((error) => {
          this.error = error.message
          this.data = null
        })

    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.fun()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.current = val
      this.fun()
    },
    // 搜索
    search() {
      axios
        .get('http://47.104.167.34:9305/apis/admin/hotSearch/page', {
          params: {
            current: this.current,
            size: this.size,
            title: this.input1,
            content: this.input2,
            status: this.value,
            t: Date.now()
          },
          ...Token
        })
        .then((response) => {
          console.log(response, '搜索response的数据');
          this.tableData = response.data.data.records
          this.error = null
        })
        .catch((error) => {
          this.error = error.message
          this.data = null
        })
    },
    // 清除
    clear() {
      this.input1 = '',
        this.input2 = '',
        this.value = ''
    },
    // 刷新
    refresh() {
      this.$router.go(0)
    },
    // 显示隐藏搜索
    show() {
      this.isAdd = !this.isAdd
    },
    // 新增
    add() {
      this.isedit = true
      this.bbb="新增"
      this.dialogFormVisible = true
    },
    sure() {
      axios
        .post('http://47.104.167.34:9305/apis/admin/hotSearch', {

          // current: 1,
          // size: 10,
          content: this.form.content,
          hotSearchId: 0,
          title: this.form.title,
          t: Date.now(),
          recDate: "",
          seq: this.num,
          status: this.radio,

        }, {
          ...Token
        })
        .then((response) => {
          console.log(response, '新增response的数据');
          if (response.data.code == "00000") {
            // console.log(1);
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.dialogFormVisible = false
            this.fun()
          }
          this.error = null
        })
        .catch((error) => {
          this.error = error.message
          this.data = null
        })
    },
    // 删除
    handleDelete(index, row) {
      console.log(row.hotSearchId, '00000')
      var arr = []
      arr.push(row.hotSearchId)

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 调用接口
          axios
            .delete('http://47.104.167.34:9305/apis/admin/hotSearch', {
              data: arr,
              ...Token
            })
            .then((response) => {
              console.log(response)
              this.fun()
            })
            .catch((error) => {
              console.log(error)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //批量删除
    delall() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 调用接口
          axios
            .delete('http://47.104.167.34:9305/apis/admin/hotSearch', {
              data: this.NumberId,
              ...Token
            })
            .then((response) => {
              console.log(response)
              this.fun()
            })
            .catch((error) => {
              console.log(error)
            })
            .finally(() => {
              this.loading = false
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //修改
    handleEdit(index, row) {
      console.log(row.hotSearchId, '修改row的数据');
      this.dialogFormVisible = true
      this.bbb="修改"
      this.isedit = false
      axios
        .get('http://47.104.167.34:9305/apis/admin/hotSearch/info/' + row.hotSearchId, {
          params: {
            // current: 1,
            // size: 10,
            t: Date.now()
          },
          ...Token
        })
        .then((response) => {
          // this.data = response.data
          console.log(response, '修改的数据');
          this.form = response.data.data
          this.error = null
        })
        .catch((error) => {
          this.error = error.message
          this.data = null
        })

    },
    editsure(){
      this.dialogFormVisible = false
      axios
        .put('http://47.104.167.34:9305/apis/admin/hotSearch', this.form, {
          ...Token
        })
        .then((response) => {
          console.log(response, '修改成功');
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.form = {}
          this.dialogFormVisible = false
          this.fun()
        })
        .catch((error) => {
          console.log(error, '修改失败');
        })

    },


  }
}
</script>

<style lang="scss" scoped>
.shop-hotSearch {
  // height: calc(100vh - 80px);
  background-color: #F1F4F5;
  padding: 20px;
  box-sizing: border-box;

  .hotSearch {
    padding: 20px;
    background-color: white;
  }

  .top {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    margin: 5px;

    .el-input {
      width: 200px;
      margin-left: 10px;
    }

    .el-select {
      width: 200px;
      margin-left: 10px;
    }

    .btn {
      padding-right: 50px;
    }

    .btn>.el-button {
      margin-right: 10px;
    }
  }

  .top>div {
    margin-left: 15px;
  }

  .ipt {
    display: flex;
  }

  .ipt>div {
    margin-left: 10px;
  }

  .btns {
    display: flex;
    justify-content: space-between;
    margin: 5px;
  }


  .cell {
    text-align: center !important;
  }

  .table {
    margin: 10px;
    text-align: center;
  }

  .el-pagination {
    text-align: right;
    margin-top: 10px;
  }
}
</style>